<template>
  <div>
    <van-tabbar v-model="active" v-if="showTabbar">
      <van-tabbar-item icon="hot-o" @click="jump('/')">电影</van-tabbar-item>
      <van-tabbar-item icon="photo-o" @click="jump('/cirema')"
        >影院</van-tabbar-item
      >
      <van-tabbar-item icon="newspaper-o" @click="jump('/news')"
        >资讯</van-tabbar-item
      >
      <van-tabbar-item icon="user-o" @click="jump('/my')">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    const active = ref(0);
    const icon = {
      active: "https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png",
      inactive:
        "https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png",
    };

    const router = useRouter();
    function jump(path: any) {
      router.push(path);
    }

    const showTabbar = ref(true); // 默认先允许
    router.afterEach((to) => {
      // 在这里根据路由路径判断是否显示底部 Tabbar
      showTabbar.value =
        !to.path.startsWith("/detail") &&
        !to.path.startsWith("/login") &&
        !to.path.startsWith("/selectCity") &&
        !to.path.startsWith("/news");
      // 当目标页不是详情页且不是登录页的时候，就展示 tabbar
    });
    return {
      icon,
      active,
      jump,
      showTabbar,
      router,
    };
  },
};
</script>

<style scoped></style>
